<input
  #inputElement
  type="text"
  [apesTime]="apesFormat"
  class="{{prefixCls}}-input"
  [placeholder]="apesPlaceHolder || ('TimePicker.placeholder' | apesI18n)"
  [(ngModel)]="value"
  readonly="readonly"
  (click)="open()">
<span class="{{prefixCls}}-icon">
  <i apes-icon apesType="clock-circle"></i>
</span>
<i
  *ngIf="apesAllowEmpty && value"
  apes-icon
  apesType="close-circle"
  apesTheme="fill"
  class="apes-time-picker-clear"
  tabindex="-1"
  [attr.aria-label]="apesClearText"
  [attr.title]="apesClearText"
  (click)="onClickClearBtn()"
></i>
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayHasBackdrop
  apesConnectedOverlay
  [cdkConnectedOverlayPositions]="overlayPositions"
  [cdkConnectedOverlayOrigin]="origin"
  [cdkConnectedOverlayOpen]="apesOpen"
  [cdkConnectedOverlayOffsetY]="-2"
  (detach)="close()"
  (backdropClick)="close()">
  <apes-time-picker-panel
    [ngClass]="apesPopupClassName"
    [@slideMotion]="'bottom'"
    [format]="apesFormat"
    [apesHourStep]="apesHourStep"
    [apesMinuteStep]="apesMinuteStep"
    [apesSecondStep]="apesSecondStep"
    [apesDisabledHours]="apesDisabledHours"
    [apesDisabledMinutes]="apesDisabledMinutes"
    [apesDisabledSeconds]="apesDisabledSeconds"
    [apesPlaceHolder]="apesPlaceHolder || ('TimePicker.placeholder' | apesI18n)"
    [apesHideDisabledOptions]="apesHideDisabledOptions"
    [apesUse12Hours]="apesUse12Hours"
    [apesDefaultOpenValue]="apesDefaultOpenValue"
    [apesAddOn]="apesAddOn"
    [opened]="apesOpen"
    [apesClearText]="apesClearText"
    [apesAllowEmpty]="apesAllowEmpty"
    [(ngModel)]="value">
  </apes-time-picker-panel>
</ng-template>

